<template>
  <div id="brandRank">
    <!-- 合作品牌 -->
    <radio_group
      :radio_values="brandList"
      v-model="brand"
      title="品牌分类"
      class="mt_20"
    />
    <section class="mt_12">
      <!-- 时间 -->
      <Timeoptions01
        v-model="dateRank01"
        :radio_values="['日榜', '周榜', '月榜']"
        class="timeOptions"
      />
      <div class="btn_group">
        <button @click="generatorImage">
          <img src="@/assets/meng/star_map04.png" />分享
        </button>
        <button @click="export_data">
          <img src="@/assets/meng/star_map05.png" />导出
        </button>
      </div>
    </section>
    <table class="table mt_20" ref="capture">
      <thead>
        <tr>
          <th>排名</th>
          <th>品牌</th>
          <th>关联直播数</th>
          <th>关联直播达人数</th>
          <th>直播人数峰值</th>
          <!-- <th>操作</th> -->
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>百科仕</td>
          <td>{{ format_num(789456123) }}</td>
          <td>{{ format_num(789456123) }}</td>
          <td>{{ format_num(789456123) }}</td>
          <!-- <td>
            <div class="optionsBtn">查看详情</div>
          </td> -->
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import Timeoptions01 from "@/component/time_options01.vue";
import html2canvas from "html2canvas";
export default {
  name: "brandRank",
  components: { Timeoptions01 },
  data() {
    return {
      brandList: ["韩束", "韩束1"],
      brand: "韩束",
      dateRank01: "日榜",
      keyword: ""
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},

  methods: {
    // 搜索
    toSearch() {
      this.dataList = [];
      this.page = 1;
      this.PostRankList();
    },
    loadMore() {
      this.PostRankList();
    },
    // 分享
    generatorImage() {
      var that = this;
      //   console.log("时间", that.dateRank01.split("?")[1]);
      // 时间
      let date;
      switch (that.dateRank01.split("?")[0]) {
        case "日榜":
          date =
            that.dateRank01.split("?")[1].split("-")[0] +
            "年" +
            that.dateRank01.split("?")[1].split("-")[1] +
            "月" +
            that.dateRank01.split("?")[1].split("-")[2] +
            "日";
          break;
        case "周榜":
          date =
            that.dateRank01.split("?")[1].split("-")[0] +
            "年" +
            that.dateRank01.split("?")[1].split("-")[1] +
            "月" +
            that.dateRank01.split("?")[1].split("-")[2] +
            "日" +
            "至" +
            that.dateRank01.split("?")[1].split("-")[3] +
            "年" +
            that.dateRank01.split("?")[1].split("-")[4] +
            "月" +
            that.dateRank01.split("?")[1].split("-")[5] +
            "日";

          break;
        case "月榜":
          date =
            that.dateRank01.split("?")[1].split("-")[0] +
            "年" +
            that.dateRank01.split("?")[1].split("-")[1] +
            "月";
          break;
      }
      const loading = this.$loading({
        lock: true,
        text: "导出中...",
        spinner: "el-icon-loading",
        customClass: "customClass"
      });
      var shareContent;
      shareContent = this.$refs.capture; //需要截图的包裹的（原生的）DOM 对象
      // console.log("shareContent", shareContent);
      var width = shareContent.offsetWidth; //获取dom 宽度
      var height = shareContent.offsetHeight; //获取dom 高度
      var canvas = document.createElement("canvas"); //创建一个canvas节点
      //   var scale = window.devicePixelRatio //定义任意放大倍数 支持小数 //   var scale = 2 //定义任意放大倍数 支持小数
      var scale = 1;
      canvas.width = width * scale * scale; //定义canvas 宽度 * 缩放
      canvas.height = height * scale * scale; //定义canvas高度 *缩放
      canvas.style.width = width + "px";
      canvas.style.height = height + "px";
      canvas.getContext("2d").scale(scale, scale); //获取context,设置scale
      var opts = {
        dpi: window.devicePixelRatio,
        scale: scale, // 添加的scale 参数
        useCORS: true,
        canvas: canvas, //自定义 canvas
        logging: true //日志开关
      };
      html2canvas(shareContent, opts).then(canvas => {
        let str;
        str = `《直播品牌榜-${date}》.png`;
        canvas.toBlob(
          function(blob) {
            const eleLink = document.createElement("a");
            eleLink.download = str;
            eleLink.style.display = "none";
            // 字符内容转变成blob地址
            eleLink.href = URL.createObjectURL(blob);
            // 触发点击
            document.body.appendChild(eleLink);
            eleLink.click();
            // 然后移除
            document.body.removeChild(eleLink);
          },
          "image/png",
          1
        );
        loading.close();
      });
    },
    // 导出
    // 文字加replace 数字加\t
    export_data() {
      let that = this;
      // 时间
      let date;
      switch (that.dateRank01.split("?")[0]) {
        case "日榜":
          date =
            that.dateRank01.split("?")[1].split("-")[0] +
            "年" +
            that.dateRank01.split("?")[1].split("-")[1] +
            "月" +
            that.dateRank01.split("?")[1].split("-")[2] +
            "日";
          break;
        case "周榜":
          date =
            that.dateRank01.split("?")[1].split("-")[0] +
            "年" +
            that.dateRank01.split("?")[1].split("-")[1] +
            "月" +
            that.dateRank01.split("?")[1].split("-")[2] +
            "日" +
            "至" +
            that.dateRank01.split("?")[1].split("-")[3] +
            "年" +
            that.dateRank01.split("?")[1].split("-")[4] +
            "月" +
            that.dateRank01.split("?")[1].split("-")[5] +
            "日";
          break;
        case "月榜":
          date =
            that.dateRank01.split("?")[1].split("-")[0] +
            "年" +
            that.dateRank01.split("?")[1].split("-")[1] +
            "月";
          break;
      }
      let str = "";
      if (that.dateRank01.split("?")[0] == "日榜") {
        str = `排名,商品来源,商品名称,售价,佣金率,关联达人数,关联视频数,关联直播数,日浏览量,日浏览量增量,日销量,日销量增量\n`;
      } else if (that.dateRank01.split("?")[0] == "周榜") {
        str = `排名,商品来源,商品名称,售价,佣金率,关联达人数,关联视频数,关联直播数,周浏览量,周浏览量增量,周销量,周销量增量\n`;
      } else if (that.dateRank01.split("?")[0] == "月榜") {
        str = `排名,商品来源,商品名称,售价,佣金率,关联达人数,关联视频数,关联直播数,月浏览量,月浏览量增量,月销量,月销量增量\n`;
      }
      for (let i = 0; i < that.dataList.length; i++) {
        let source = "";
        if (that.dataList[i].pro_id == 0) {
          source = "京东";
        } else if (that.dataList[i].pro_id == 1) {
          source = "淘宝";
        } else if (that.dataList[i].pro_id == 2) {
          source = "小店";
        } else if (that.dataList[i].pro_id == 3) {
          source = "天猫";
        } else if (that.dataList[i].pro_id == 4) {
          source = "苏宁";
        } else if (that.dataList[i].pro_id == 5) {
          source = "考拉";
        }
        // 浏览量增量
        let pv_incr_cent = "";
        if (that.dataList[i].pv_incr_cent == "--") {
          pv_incr_cent = "--";
        } else {
          pv_incr_cent = that.formatRate(that.dataList[i].pv_incr_cent, 1);
        }
        // 销量增量
        let sale_incr_cent = "";
        if (that.dataList[i].sale_incr_cent == "--") {
          sale_incr_cent = "--";
        } else {
          sale_incr_cent = that.formatRate(that.dataList[i].sale_incr_cent, 1);
        }

        str += `${that.dataList[i].rank},${source},\"${that.dataList[
          i
        ].title.replace(/"/g, '""')}\",${that.dataList[i].price},${
          that.dataList[i].commission_rate
        }%,${that.format_num(that.dataList[i].author_count)},${that.format_num(
          that.dataList[i].aweme_count
        )},${that.format_num(that.dataList[i].live_count)},${that.format_num(
          that.dataList[i].pv_incr
        )},${pv_incr_cent},${that.format_num(
          that.dataList[i].sale_incr
        )},${sale_incr_cent}\n`;
      }
      var blob = new Blob([str], { type: "text/plain;charset=utf-8" }); //解决中文乱码问题
      blob = new Blob([String.fromCharCode(0xfeff), blob], { type: blob.type });
      let object_url = window.URL.createObjectURL(blob);
      var link = document.createElement("a");
      link.href = object_url;
      let str_name = "";
      if (that.rankKind == "抖音销量榜") {
        str_name = `《商品抖音销量榜-${date}》.csv`;
      } else if (that.rankKind == "淘宝客推广排行榜") {
        str_name = `《商品淘宝客推广排行榜-${date}》.csv`;
      }
      link.download = str_name;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    }
  }
};
</script>
<style lang="less" scoped>
#brandRank {
  .search01 {
    display: inline-block;
    margin-left: 28px;
    .searchBox {
      margin-top: 0 !important;
    }
  }
  .timeOptions {
    display: inline-block;
  }
  .btn_group {
    text-align: right;
    float: right;
    button {
      width: 80px;
      height: 32px;
      background-color: #f8f8f8;
      border-radius: 4px;
      border: solid 1px #e6e6e6;
      font-size: 14px;
      line-height: 30px;
      box-sizing: border-box;
      color: #222222;
      text-align: center;
    }
    > button:nth-child(1) {
      margin-right: 10px;
      img {
        width: 13px;
        vertical-align: -2px;
        margin-right: 6px;
      }
    }
    > button:nth-child(2) {
      img {
        width: 14px;
        vertical-align: -1px;
        margin-right: 6px;
      }
    }
  }
  table {
    thead {
      tr {
        th:nth-of-type(2) {
          width: 29.7%;
        }
      }
    }
    tbody {
      tr {
        height: 72px;
        td {
          text-align: center;
        }
        td:nth-of-type(2) {
          font-size: 14px;
          color: #1779ff;
        }
        td:nth-of-type(1),
        td:nth-of-type(3),
        td:nth-of-type(4),
        td:nth-of-type(5) {
          font-family: DINAlternate-Bold;
          font-size: 16px;
          color: #222222;
        }
      }
    }
  }
  // 操作
  .optionsBtn {
    cursor: pointer;
    width: 88px;
    height: 32px;
    line-height: 32px;
    background-color: #fd7f2c;
    border-radius: 4px;
    text-align: center;
    font-size: 14px;
    color: #ffffff;
    margin: 0 auto;
  }
}
</style>
